<template v-if="show">
  <n-flex justify="center">
    <n-card style="width: 100%;margin-bottom: 80px">
      <n-tabs type="line" animated>
        <n-tab-pane name="carry out" tab="进行中">
  <n-space vertical>
    <n-card :bordered="false" style="width: 100%; margin-bottom: 16px;">
      <n-table :data="filteredOrders" stripe bordered>
        <n-thead>
          <n-tr>
            <n-th>状态</n-th>
            <n-th>订单编号</n-th>
            <n-th>订单名称</n-th>
            <n-th>价格（元）</n-th>
            <n-th>操作</n-th>
          </n-tr>
        </n-thead>
        <n-tbody>
          <n-tr v-for="order in saveOrders1" :key="order.id">
            <n-td>{{ order.orderStatus }}</n-td>
            <n-td>{{ order.orderId }}</n-td>
            <n-td>{{ order.orderType }}</n-td>
            <n-td>{{ order.orderPrice }}</n-td>
            <n-td>
              <n-button size="small" type="primary" @click="handleDetails(order),showDetailsModal = true">
                查看详情
              </n-button>
              <n-button size="small" type="info">
               申诉
              </n-button>
            </n-td>
          </n-tr>
        </n-tbody>
      </n-table>
    </n-card>
    </n-space>
        </n-tab-pane>
        <n-tab-pane name="To be evaluated" tab="已完成">
          <n-space vertical>
            <n-card :bordered="false" style="width: 100%; margin-bottom: 16px;">
              <n-table :data="filteredOrders" stripe bordered>
                <n-thead>
                  <n-tr>
                    <n-th>状态</n-th>
                    <n-th>订单编号</n-th>
                    <n-th>订单名称</n-th>
                    <n-th>价格（元）</n-th>
                    <n-th>操作</n-th>
                  </n-tr>
                </n-thead>
                <n-tbody>
                  <n-tr v-for="order in saveOrders2" :key="order.id">
                    <n-td>{{ order.orderStatus }}</n-td>
                    <n-td>{{ order.orderId }}</n-td>
                    <n-td>{{ order.orderType }}</n-td>
                    <n-td>{{ order.orderPrice }}</n-td>
                    <n-td>
                      <n-button size="small" type="primary" @click="handleDetails(order),showDetailsModal = true">
                        查看详情
                      </n-button>
                      <n-button size="small" type="info">
                        申诉
                      </n-button>
                    </n-td>
                  </n-tr>
                </n-tbody>
              </n-table>
            </n-card>
          </n-space>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </n-flex>
  <!-- 添加弹窗模板 -->
<!--  <div v-if="showDetailsModal" class="modal-overlay">-->
<!--    <div class="modal-dialog">-->
<!--      <h3>订单详情</h3>-->
<!--      <p>订单编号：{{ details.orderId }}</p>-->
<!--      <p>订单类型：{{ details.orderType }}</p>-->
<!--      <p>价格（元）：{{ details.orderPrice }}</p>-->
<!--      <button @click="closeDetailsModal">关闭</button>-->
<!--    </div>-->
<!--  </div>-->
  <n-modal v-model:show="showDetailsModal" style="z-index: 50;">
    <n-card style="width: 450px;height: 300px">
      <div style="text-align: center;font-size: 25px;padding-bottom: 15px">订单详情</div>
      <n-flex vertical>
        <n-card >
          <n-space class="detail1">订单编号：{{orderDetail.orderId}}</n-space>
          <n-space class="detail1">订单类型：{{orderDetail.orderType}}</n-space>
          <n-space class="detail1">订单价格：{{orderDetail.orderPrice}}</n-space>
        </n-card>
      </n-flex>

    </n-card>
  </n-modal>

  <n-modal v-model:show="showDetailsModal">
    <n-card
        :style="cardStyle"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
    >
      <template #header>
        <h1 style="text-align: center;">{{orderDetail.orderType}}</h1>
      </template>
      <div style="margin:0 10% 10px 10%;position: relative">
        <n-space vertical>
          <n-steps
              size="medium"
              :current="current"
              :status="currentStatus"
          >
            <n-step
                title="已发起"
                :description="orderDetail.creationTime"
            />
            <n-step
                title="进行中"
                :description="orderDetail.endTime"
            />
            <n-step
                title="待评价"
                description=""
            />
            <n-step
                title="已完成"
                description=""
            />
          </n-steps>
        </n-space>
      </div>
      <div style="position: relative;">
        <n-space align="flex-end" style="bottom: 0;">
          <n-avatar
              round
              size="small"
              src="/messageAvatar/头像.jpg"
          />
          <div style="margin: 0 auto;height: 30px;">{{orderDetail.userName}}</div>
        </n-space>
        <div style="height: 240px;">
          <div style="font-size: 20px;margin: 10px 0;">订单详情:</div>
          <div class="div-text">{{orderDetail.orderDescription}}</div>
        </div>
        <div v-if="showDisEvaluation">
          <div style="font-size: 20px;margin: 10px 0;">订单评价:</div>
          <n-rate style="margin: 20px auto;" allow-half readonly :default-value="orderDetail.orderRate"/>
          <div class="div-text">{{orderDetail.orderReview}}</div>
          <img v-if="orderDetail.commentImgUrl!=null" :src="BASE_URL+url" width="100" v-for="url in orderDetail.commentImgUrl.split(',')">
        </div>
        <div v-if="showArriveButton">
          <n-button style="width: 100%;margin: 20px 0;" @click="orderArrive">已送达</n-button>
        </div>
      </div>
    </n-card>
  </n-modal>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import {NButton, NCard, NTable, NThead, NTr, NTh, NTd, NTbody, useMessage} from 'naive-ui';
import {loadingBar} from "../HomeView_N.vue"


import axios from "axios";
import qs from "qs";
const showDisEvaluation = ref(false);
const showArriveButton = ref(false);
const message = useMessage();

const currentRef = ref(1);
const currentStatus = ref("process");
const current = currentRef;

// 模拟数据
//定义数组，保存从后端拿到的订单数据
const saveOrders = ref([]);
const show = ref(false);

const cardStyle = ref({width:'1000px',height:'950px'});
const saveOrders1 = ref([]);
const saveOrders2 = ref([]);

const orderDetail = ref({});

const loadOrders = ()=>{
  axios.get(BASE_URL+'/v1/order/select?riderId='+loginUser.value.userId).then((response)=>{
    if(response.data.code==2000) {
      saveOrders.value = response.data.data;
      for(let a = 0;a<saveOrders.value.length;a++) {
        if (saveOrders.value[a].orderStatus == '进行中') {
          saveOrders1.value.push(saveOrders.value[a]);
        } else if (saveOrders.value[a].orderStatus == '待评价' || saveOrders.value[a].orderStatus == '已完成') {
          saveOrders2.value.push(saveOrders.value[a]);
        }
      }
      console.log(saveOrders.value);
      loadingBar.finish();
      show.value = false;
    }
  })
}

const loginUser = ref({
  userId:'',
  username:'',
  nickname:'',
  email:'',
  birth:'',
  gender:'',
  level:'',
  description:'',
});

onMounted(()=>{
  loginUser.value = getUser();
  loadOrders();

})

const handleDetails = (item)=>{
  orderDetail.value = item;
  console.log(orderDetail.value);
  console.log(item.value);
  if(orderDetail.value.orderStatus == '待接单') {
    currentRef.value = 1;
    showArriveButton.value = false;
    showDisEvaluation.value =false;
    cardStyle.value = {width:'1000px',height:'600px'};
  }
  else if (orderDetail.value.orderStatus == '进行中')
  {
    currentRef.value = 2;
    cardStyle.value = {width:'1000px',height:'600px'};
    showArriveButton.value = false;
    showDisEvaluation.value =false;
  }
  else if (orderDetail.value.orderStatus == '待评价')
  {
    cardStyle.value = {width:'1000px',height:'600px'};
    currentRef.value = 3;
    showArriveButton.value = false;
    showDisEvaluation.value =false;
  }
  else{
    currentRef.value = 4;
    cardStyle.value = {width:'1000px',height:'950px'};
    showArriveButton.value = false;
    showDisEvaluation.value =false;
  }
  if(orderDetail.value.riderId == loginUser.value.userId && orderDetail.value.orderStatus == '进行中')
  {
    cardStyle.value = {width:'1000px',height:'600px'};
    showArriveButton.value = true;
    showDisEvaluation.value = false;
  }

  if(orderDetail.value.orderStatus == '已完成')
  {
    cardStyle.value = {width:'1000px',height:'950px'};
    showDisEvaluation.value = true;
    showArriveButton.value = false;
  }

}

let currentFilter = ref('全部');

const filterByStatus = (status) => {
  currentFilter.value = status;
};

const filteredOrders = computed(() => {
  if (currentFilter.value === '全部') {
    return saveOrders.value;
  }
  return saveOrders.value.filter(order => order.orderStatus === currentFilter.value);
});

const showDetailsModal = ref(false);

const orderArrive = ()=>{
  orderDetail.value.orderStatus = '待评价';
  let data = qs.stringify(orderDetail.value);
  axios.post(BASE_URL+'/v1/order/insert',data).then((response) => {
    if (response.data.code === 2000) {
      message.success('订单已送达!努力就会有回报!');
      showDetailsModal.value = false;
      loadOrders();
    }else {
      message.error('失败了，请联系管理员处理~');
    }
  })
}

// const handleDetails = (order) => {
//   console.log(`查看订单${order.orderNo}的详情`);
// };


//定义数组，保存查看详情的内容




const closeDetailsModal = () => {
  showDetailsModal.value = false;
};


</script>

<style scoped>
.detail1 {
  font-size: 20px;
}
</style>